<template>
	<view class="content">
		<view class="content-top">
			<view class="content-top-title">
				<view class="content-top-title-left">资料填写</view>
			</view>
			
			<view class="content-item">
				<view class="content-item-name">真实姓名</view>
				<input class="address-item-input" type="text" v-model="userName" placeholder="请填输入姓名">
			</view>
			<view class="content-item">
				<view class="content-item-name">身份证号</view>
				<input class="address-item-input" type="text" v-model="idCard" placeholder="请填输入身份证号码">
			</view>
			<view class="content-item">
				<view class="content-item-name">联系电话</view>
				<input class="address-item-input" type="text" v-model="userphone" placeholder="请填输入联系电话">
			</view>
			
			<view class="content-item">
				<view class="content-item-name">所在城市</view>
				<picker class="content-item-right" mode="multiSelector" :range="areaArray" range-key="name"  @change="areaArraySelect" @columnchange='areaArrayFun'>
					<view class="area-box-item">
						<view class="huishou-news-address-select-text">{{areaText}}</view>
						<image class="huishou-weight-right-img" :src="rightjiantou" mode="widthFix"></image>
					</view>
				</picker>
			</view>
			
			<view class="content-item" style="margin-bottom: 15px;">
				<view class="content-item-name">详情地址</view>
				<view class="address-item-input" style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
					<input style="width: calc(100% - 20px);" class="address-item-input" type="text" v-model="addressDetail" placeholder="请填写详细地址">
					<view @click="jingweiduFun" style="width: 18px;display: flex;flex-direction: column;align-items: center;justify-content: center;">
						<image class="dingwei-icon" :src="dingweiIcon" mode="widthFix"></image>
					</view>
				</view>
			</view>
			
			<view class="content-item" style="border: none;">
				<view style="font-size: 16px;color: #333;">工作头像</view>
				<view class="add-shiwu-img-box">
					<view class="uploadImg-box" v-for="(item,index) in imageArray" :key="index">
						<!-- <image @click="deleteImgFun" :data-index='index' class="delete-img" :src="delete_img" mode=""></image> -->
						<image class="uploadImg" :src="item" mode=""></image>
					</view>
					<view class="add-shiwu-img" @click="uploadImgFun" data-type='headImg' v-if='imageArray.length < 1'>
						<view class="add-shu"></view>
						<view class="add-heng"></view>
					</view>
				</view>
			</view>
			
			
		</view>
		<view class="content-top" style="margin-top: 12px;" v-if='hideSet.recycler_rz_isopen == 1'>
			<view style="font-size: 16px;font-weight: bold; margin-bottom: 25px;">上传本人身份证</view>
			<view class="content-idcard-box">
				<view class="content-idcard-item" @click="uploadImgFun" data-type='idCard01'>
					<view class="content-idcard-item-tupian"  v-show="!idCardImgOne">
						<image class="idcard-beijing" :src="idCardImg01" mode=""></image>
						<text>上传身份证正面</text>
					</view>
					<image class="content-idcard-item-img" v-show="idCardImgOne" :src="idCardImgOne" mode=""></image>
				</view>
				<view class="content-idcard-item" @click="uploadImgFun" data-type='idCard02'>
					<view class="content-idcard-item-tupian"  v-show="!idCardImgTwo">
						<image class="idcard-beijing" :src="idCardImg02" mode=""></image>
						<text>上传身份证反面</text>
					</view>
					<image class="content-idcard-item-img" v-show="idCardImgTwo" :src="idCardImgTwo" mode=""></image>
				</view>
			</view>
			<view class="content-idcard-box" style="margin-top: 20px;">
				<view class="content-idcard-item" @click="uploadImgFun" data-type='idCard03'>
					<view class="content-idcard-item-tupian"  v-show="!idCardImgThree">
						<image class="idcard-beijing"  :src="idCardImg03" mode=""></image>
						<text>上传手持身份证照</text>
					</view>
					<image class="content-idcard-item-img" v-show="idCardImgThree" :src="idCardImgThree" mode=""></image>
				</view>
			</view>
		</view>
		<view class="bottom-btn-box-left-xieyi" style="margin-bottom: 180px;margin-top: 20px;margin-left: 10px;">
			<checkbox-group @change="changeXiyi">
				<checkbox class="checkboxTip" :checked="checkboxXy" />
			</checkbox-group>
			<view class="bottom-btn-xieyi">阅读并同意 <text class="" style="color: #00CB8B;">《回收员服务协议》</text></view>
		</view>
		
		<view class="bottom-btn-box">
			
			<view class="liji-btn" @click="lijiFun">
				提交申请
			</view>
		</view>
	</view>
</template>

<script>
	var QQMapWX = require('../../common/js/qqmap-wx-jssdk.js');
	var qqmapsdk;
	import http from '../../api/api-index.js'
	import baseUrl from '../../utils/config.js'
	import dituKey from '../../utils/setTing.js'
	
	export default{
		data(){
			return{
				dingweiIcon:baseUrl+'/uploads/static/image/recovery_address_add_icon_location@2x.png',
				rightjiantou:baseUrl+'/uploads/static/image/right-jiantou.png',
				delete_img:baseUrl+'/uploads/static/image/recovery_address_manage_icon_delete@2x.png',
				idCardImg01:baseUrl+'/uploads/static/image/recovery_user_center_idcard_bg_01@2x.png',
				idCardImg02:baseUrl+'/uploads/static/image/recovery_user_center_idcard_bg_02@2x.png',
				idCardImg03:baseUrl+'/uploads/static/image/recovery_user_center_idcard_bg_03@2x.png',
				userName:'',
				areaText:'省/市/区',
				idCard:'',
				userphone:'',
				checkboxXy:false,//同意协议
				addressDetail:'',
				areaArray:[
					// [{name:'北京市',id:100}],
					// ['1','2'],
					// ['1','2','3']
				],
				oneArea:[], //省
				twoArea: [], //市
				threeArea: [], //区
				fourArea:[], //街道
				selectIndex:[],//选中的下标
				
				province_id:'',//省
				city_id:'',//市
				area_id:'',//区
				street_id:'',//街道
				addressDetail:'',//详细地址
				lng:'',//经度
				lat:'',//维度
				
				imageArray:[],//上传图片
				idCardImgOne:'',//正面身份证
				idCardImgTwo:'',//反面身份证
				idCardImgThree:'',//手持身份证
				hideSet:{}
			}
		},
		onLoad(options){
			// 实例化API核心类
			qqmapsdk = new QQMapWX({
				 key: dituKey.key
			});
			this.hideSet = uni.getStorageSync('hideSet')
			this.areaChange(0,0)
			console.log(options)
			if(options.type == 'enit'){
				this.getRecyclerInfoFun()
			}
		},
		methods:{
			getRecyclerInfoFun(){
				http.getRecyclerInfo().then((res)=>{
					console.log(res)
				})
			},
			areaChange(id,type){
				//type 0是省 1是市 2是区
				let _this = this
				http.getAreaChange({parent_id:id}).then((res)=>{
					if(type == 0){
						_this.oneArea = res.data
						_this.areaChange(res.data[0].id,1)
					}else if(type == 1){
						_this.twoArea = res.data
						_this.areaChange(res.data[0].id,2)
					}else if(type == 2){
						_this.threeArea = res.data
						_this.areaChange(res.data[0].id,3)
					}else if(type == 3){
						_this.fourArea = res.data
					}
					_this.areaArray = [
						_this.oneArea,
						_this.twoArea,
						_this.threeArea,
						_this.fourArea
					]
				})
			},
			areaArraySelect(e){
				this.selectIndex = e.detail.value
				
				//选中的省市区街道
				this.areaText = this.areaArray[0][this.selectIndex[0]].name + '/' + this.areaArray[1][this.selectIndex[1]].name + '/' + this.areaArray[2][this.selectIndex[2]].name + '/' + this.areaArray[3][this.selectIndex[3]].name
				
				this.province_id = this.areaArray[0][this.selectIndex[0]].id
				this.city_id = this.areaArray[1][this.selectIndex[1]].id
				this.area_id = this.areaArray[2][this.selectIndex[2]].id
				this.street_id = this.areaArray[3][this.selectIndex[3]].id
			},
			areaArrayFun(e){
				let type = e.detail.column
				let index = e.detail.value
				if(type == 0){
					let id = this.areaArray[0][index].id
					this.areaChange(id,1)
				}else if(type == 1){
					let id = this.areaArray[1][index].id
					this.areaChange(id,2)
				}else if(type == 2){
					let id = this.areaArray[2][index].id
					this.areaChange(id,3)
				}
			},
			jingweiduFun(){
				//注意权限问题
				let _this = this
				if(this.areaText != '省/市/区'){
					let allAddress = this.areaArray[0][this.selectIndex[0]].name  + this.areaArray[1][this.selectIndex[1]].name  + this.areaArray[2][this.selectIndex[2]].name + this.areaArray[3][this.selectIndex[3]].name
					qqmapsdk.geocoder({
						address:allAddress,
						success:function(ress){
							var lat=ress.result.location.lat
							var lng=ress.result.location.lng
							_this.lat = lat 
							_this.lng = lng
							uni.chooseLocation({
								latitude: _this.lat,
								longitude: _this.lng,
								success: function (res) {
									console.log('位置名称：' + res.name);
									console.log('详细地址：' + res.address);
									console.log('纬度：' + res.latitude);
									console.log('经度：' + res.longitude);
									_this.addressDetail = res.name
									_this.lat = res.latitude
									_this.lng = res.longitude
								}
							});
						}
					})
				}else{
					uni.authorize({
						scope: 'scope.userLocation',
						success() {
							uni.getLocation({
								type: 'wgs84', //返回可以用于uni.openLocation的经纬度
								success: function (res) {
									const latitude = res.latitude;
									const longitude = res.longitude;
									uni.chooseLocation({
										latitude: latitude,
										longitude: longitude,
										success: function (res) {
											console.log('位置名称：' + res.name);
											console.log('详细地址：' + res.address);
											console.log('纬度：' + res.latitude);
											console.log('经度：' + res.longitude);
											_this.addressDetail = res.name
											_this.lat = res.latitude
											_this.lng = res.longitude
										}
									});
								}
							});
						},
						fail(){
							uni.showModal({
								title:'提示',
								content: '暂无权限获取用户位置,请检查定位服务是否开启或定位权限拒绝'
							})
						}
					})
				}
			},
			deleteImgFun(e){
				let delect_index = e.currentTarget.dataset.index 
				this.imageArray.splice(delect_index,1)
			},
			uploadImgFun(e){
				let _this = this
				let type = e.currentTarget.dataset.type
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function (res) {
						console.log(res);
						let access_token = uni.getStorageSync('X-Auth-Token')
						uni.uploadFile({
							fileType:"image",
							url: baseUrl+'/api/common/upload', //上传头像接口
							filePath: res.tempFilePaths[0],
							header:{
								'X-Auth-Token':access_token,
								"Content-Type": "multipart/form-data",
							},
							formData:{
								file:'file'//页面需要上传的字段
							},
							name: 'file',
							success: (uploadFileRes) => {
								var avatarRes = JSON.parse(uploadFileRes.data)
								if(avatarRes.code == 1){
									uni.showToast({
										title:'上传成功',
										icon:'success'
									})
									if(type == 'headImg'){
										_this.imageArray.push(avatarRes.data.fullurl)
									}else if(type == 'idCard01'){
										_this.idCardImgOne = avatarRes.data.fullurl
									}else if(type == 'idCard02'){
										_this.idCardImgTwo = avatarRes.data.fullurl
									}else if(type == 'idCard03'){
										_this.idCardImgThree = avatarRes.data.fullurl
									}
								}else{
									uni.showToast({
										title:'上传失败',
										icon:'error'
									})
								}
							   
							}
						});
					}
				});
			},
			changeXiyi(e){
				this.checkboxXy = e.detail.value.length > 0 ? true : false
			},
			lijiFun(){
				let _this = this
				const access_token = uni.getStorageSync('X-Auth-Token')
				if(this.checkboxXy){
					uni.showModal({
						title: '提示',
						content: '已确认信息无误？',
						success: function (res) {
							if (res.confirm) {
								uni.showLoading()
								http.getUserJoin({
									name:_this.userName,
									mobile:_this.userphone,
									idcard:_this.idCard,
									head_image:_this.imageArray.toString(),
									idcard_front_image:_this.idCardImgOne,
									idcard_back_image:_this.idCardImgTwo,
									idcard_hold_image:_this.idCardImgThree,
									province_id:_this.province_id,
									city_id:_this.city_id,
									area_id:_this.area_id,
									street_id:_this.street_id,
									address:_this.addressDetail
								},{
									"X-Auth-Token":access_token,
									'Content-Type': 'application/x-www-form-urlencoded'
								}).then((res)=>{
									console.log(res)
									uni.hideLoading()
									if(res.data.code == 1){
										uni.showToast({
											title:'提交成功',
											icon:'success'
										})
										setTimeout(function(){
											uni.redirectTo({
												url:'/pages/recoveryCenter/recoveryLoading'
											})
										},1500)
										
									}else{
										uni.showToast({
											title:res.data.msg,
											icon:'none'
										})
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else{
					uni.showToast({
						title:'请同意服务协议',
						icon:'none'
					})
				}
			}
		}
	}
</script>

<style>
	.content{width: 100%;min-height: 100vh;background-color: #F8F9FD;box-sizing: border-box;padding: 12px;font-family: 'PingFang Bold';}
	.content-top{width: 100%;background: #fff;border-radius: 10px;box-sizing: border-box;padding: 20px;}
	.content-top-title{width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
	.content-top-title-left{font-size: 17px;line-height: 17px;font-weight: bold;margin-bottom: 15px;}
	.content-item{width: 100%;display: flex;flex-direction: row;justify-content: space-between;min-height: 70px;border-bottom: 1px solid #f6f6f6;align-items: center;}
	.content-item-name{width: 90px;font-size: 16px;color: #333;}
	.content-item-right{width: calc(100% - 105px);}
	.address-item-input{width: calc(100% - 105px);height: 54px;font-size: 16px;}
	.area-box-item{width: 100%;height: 100%; display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
	.huishou-news-address-select-text{font-size: 16px;color: #333;line-height: 30px;}
	.huishou-weight-right-img{width: 16px;height: 16px;margin-left: 10px;}
	.text-content{
		width: 100%;
		box-sizing: border-box;
		padding: 10px 0;
		display: flex;flex-direction: row;
		align-items: center;
		margin-bottom: 15px;
		border-bottom: 1px solid #F6F6F6;
	}
	.textarea-box{
		width: calc(100% - 20px);
		min-height: 30px;
		font-size: 16px;
	}
	.dingwei-icon{
		width: 18px;
		height: 18px;
	}
	.add-shiwu-img-box{width: calc(100% - 70px);overflow: hidden;display: flex;flex-direction: row;justify-content: flex-end;}
	.add-shiwu-img{width: 69px;height: 69px;border-radius: 10px; border: 1px solid #e5e5e5;background: #f6f6f6;position: relative;}
	.add-shu{position: absolute;width: 3px;height: 35px;border-radius: 3px;background: #d8d8d8;top: 17.25px;left: 33px;}
	.add-heng{position: absolute;width: 35px;height: 3px;border-radius: 3px;background: #d8d8d8;top: 33px;left: 17.25px;}
	.uploadImg-box{width: 70px;height: 70px;position: relative;border: 1px solid #d8d8d8;border-radius: 50%;}
	.uploadImg{width: 100%;height: 100%;border-radius: 50%;}
	.delete-img{width: 20px;height: 20px;position: absolute;right: 0;top: 0;z-index: 10;background: rgba(0,0,0,0.8);}
	.content-idcard-box{width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
	.content-idcard-item{width: calc((100% - 20px) / 2);height: 110px;}
	.content-idcard-item-tupian{width: 100%;height: 100%;position: relative;}
	.idcard-beijing{width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 1;}
	.content-idcard-item-tupian text{position: absolute;bottom:15px;left:0;width: 100%;text-align: center;color: #00CB8B;font-size: 12px;z-index: 2;}
	.content-idcard-item-img{width: 100%;height: 100%;}
	.bottom-btn-box{width: 100%;position: fixed;bottom: 0;left: 0;z-index: 20; height: calc(100px + env(safe-area-inset-bottom) /2);background: #fff;box-sizing: border-box;padding: 10px 20px 0px 20px;}
	.bottom-btn-box-left-xieyi{display: flex;flex-direction: row;align-items: center;font-size: 14px;margin-bottom: 10px;}
	.checkboxTip{transform:scale(0.8)}
	.liji-btn{width: 100%;height: 50px;text-align: center;line-height: 50px;color: #fff;border-radius: 5px;background: #00CB8B;}
</style>